<template>
  <div ref="autoHeight" class="auto-height">
    <slot />
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
const autoHeight = ref()
onMounted(() => {
  setHeight()
  window.addEventListener('resize', setHeight)
})
onUnmounted(() => {
  window.removeEventListener('resize', setHeight)
})
const setHeight = () => {
  const dom = autoHeight.value
  const toTop = getToTop(dom)
  dom.style.height = `${window.innerHeight - toTop - 1}px`
}
const getToTop = (dom: HTMLElement) => {
  let mid = dom
  let toTop:number = mid?.offsetTop || 0
  while (mid?.offsetParent?.nodeName !== 'BODY') {
    toTop += mid.offsetTop
    mid = mid.offsetParent as HTMLElement
  }
  return toTop
}
</script>
<style lang="less" scoped>
.auto-height{
  display: flex;
  flex-direction: column;
}
</style>
